.device {
  display: flex;
  padding-top: 30px;
  // align-items: center;
  justify-content: center;

  .device-box {
    .noDevice {
      margin-top: 200px;
      color: rgba(0, 0, 0, 0.5);
      text-align: center;

      .title {
        font-size: 24px;
      }
    }

    .device-info {
      .screen {
        height: 100%;
        margin: auto;
      }

      .iphone5s {
        position: relative;
        width: 600px;
        height: 260px;
        background-color: #2e2e2e;
        border: 2px solid #3b3b3b;
        border-radius: 20px;
        box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5);

        .tools {
          position: absolute;
          right: -26px;
          top: 0;

          img {
            cursor: pointer;
          }
        }

        .top {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 6px;

          div {
            display: flex;
            align-items: center;
            justify-content: center;

            .listen {
              width: 6px;
              height: 6px;
              background-color: #1a1a1a;
              border: 3px solid #4a4a4a;
              border-radius: 50%;
              box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
            }

            .speaker {
              margin-left: 2px;
              width: 60px;
              height: 3px;
              border: 3px solid #4a4a4a;
              background-color: #1a1a1a;
              border-radius: 10px;
              box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
            }
          }
        }

        .content {
          width: 98%;
          height: 88%;
          background-color: #0a0a0a;
          margin: 6px auto 0;
          text-align: center;
          color: white;
          border: 2px solid #1a1a1a;
          position: relative;

          // &::before {
          //     content: "";
          //     width: 100%;
          //     height: 100%;
          //     position: absolute;
          //     top: 0;
          //     left: 0;
          //     background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 80%)
          // }
        }
      }

      .device-desc {
        margin-top: 30px;
        width: 600px;

        :global {
          .ant-descriptions-item-content,
          .ant-descriptions-item-label {
            padding: 2px 20px !important;
          }
        }
      }

      :global {
        .ant-descriptions-view {
          table {
            border: rgba(0, 0, 0, 0.08) solid 1px;
          }
        }
      }
    }
  }
}
